<template>
  <div >
    <nav-header></nav-header>
    <nav-bread>
      <span>Goods</span>
    </nav-bread>
    <div class="accessory-result-page accessory-page">
      <div class="container">
        <div class="filter-nav">
          <span class="sortby">Sort by:</span>
          <a href="javascript:void(0)" class="default cur">Default</a>
          <a href="javascript:void(0)" class="price" @click="sortGoods">Price <svg class="icon icon-arrow-short"><use xlink:href="#icon-arrow-short"></use></svg></a>
          <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterPop">Filter by</a>
        </div>
        <div class="accessory-result">
          <!-- filter -->
          <div class="filter stopPop" id="filter" :class="{'filterby-show': filterby}">
            <dl class="filter-price">
              <dt>Price:</dt>
              <dd><a href="javascript:void(0)" @click="setPriceFilter('all')" v-bind:class="{'cur': priceChecked === 'all'}">All</a></dd>
              <dd v-for="(price,index) in priceFilter">
                <a href="javascript:void(0)" @click="setPriceFilter(index)" :class="{'cur': priceChecked === index}">{{price.startPrice}} - {{price.endPrice}}</a>
              </dd>
            </dl>
          </div>

          <!-- search result accessories list -->
          <div class="accessory-list-wrap">
            <div class="accessory-list col-4">
              <ul>
                <li v-for="(item,index) in goodList">
                  <div class="pic">
                    <a href="#"><img v-lazy="'/static/' + item.productImage" alt=""></a>
                  </div>
                  <div class="main">
                    <div class="name">{{item.productName}}</div>
                    <div class="price">{{item.salePrice}}</div>
                    <div class="btn-area">
                      <a href="javascript:;" class="btn btn--m" @click="addCart(item.productId)">加入购物车</a>
                    </div>
                  </div>
                </li>
              </ul>
              <div class="load-more" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
                <img src="../assets/loading/loading-spinning-bubbles.svg" v-show="loading">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="md-overlay" @click="closePop" v-show="overLayFlag"></div>
    <model :mdShow="mdShow" v-on:close="closeModel">
      <p slot="message">请先登录</p>
      <div slot="btnGroup">
        <a class="btn btn--m" @click="mdShow=false">关闭</a>
      </div>
    </model>
    <model :mdShow="mdShowCart" v-on:close="closeModel">
      <p slot="message">
        <svg class="icon-status-ok">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
        </svg>
        <span>加入购物车成功</span>
      </p>
      <div slot="btnGroup">
        <a class="btn btn--m" @click="mdShowCart=false">继续购物</a>
        <router-link class="btn btn--m" to="/cart">查看购物车</router-link>
      </div>
    </model>
    <nav-footer></nav-footer>
  </div>
</template>
<style>
.load-more{
  height: 100px;
  line-height: 100px;
  text-align: center;
}
</style>
<script>
  import './../assets/css/base.css'
  import './../assets/css/checkout.css'
  import './../assets/css/login.css'
  import './../assets/css/product.css'
  import NavHeader from '../components/NavHeader'
  import NavFooter from '../components/NavFooter'
  import NavBread from '../components/NavBread'
  import axios from '../../node_modules/axios/dist/axios'
  import Model from '../components/Model'
export default {
  name: 'App',
  data(){
    return{
      goodList: [],
      priceFilter:[
        {startPrice:"0",
         endPrice: "500"
        },
        {startPrice:"500",
         endPrice: "1000"
        },
        {startPrice:"1000",
         endPrice: "1500"
        },
        {startPrice:"1500",
          endPrice: "5000"
        }
      ],
      priceChecked: 'all',
      filterby: false,
      overLayFlag: false,
      sortFlag: true,
      page: 1,
      pageSize: 8,
      busy: true, // 默认infiniteScroll失效
      loading: false,
      mdShow:false,
      mdShowCart: false
    }
  },
  components:{
    NavHeader,
    NavFooter,
    NavBread,
    Model
  },
  mounted(){
    this.getGoodsList()
  },
  methods: {
    getGoodsList(flag){
      var param = {
        page: this.page,
        pageSize: this.pageSize,
        sort: this.sortFlag ? 1 : -1,
        priceLevel: this.priceChecked
      };
      this.loading = true; // 请求数据前loading图标显示
      axios.get('/goods/list',{
        params: param
      }).then(result => {
        this.loading = false;// 请求数据后loading图标隐藏
        var res = result.data;
        if(res.status === "0"){// 请求成功
          if(flag){//如果是拉到底部
            this.goodList =this.goodList.concat(res.result.list);
            if(res.result.count === 0){
              this.busy = true;
            }else{
              this.busy = false;
            }
          }else{
            this.goodList = res.result.list;
            this.busy = false;
          }
        }else{
          this.goodList = [];
        }
      })
    },
    sortGoods(){
      this.sortFlag = ! this.sortFlag;
      this.page = 1;// 把页码重置为1
      this.getGoodsList();
    },
    loadMore(){
      setTimeout(()=>{
        this.page++;
        this.getGoodsList(true) // 已经拉倒底部，传入flag为true
      }, 500)
    },
    showFilterPop(){
      this.filterby = true;
      this.overLayFlag = true;
    },
    setPriceFilter(index){
      this.priceChecked = index;
      this.page = 1;// 重新从第一页开始显示
      this.getGoodsList();
      this.closePop();
    },
    closePop(){
      this.filterby = false;
      this.overLayFlag = false;
    },
    addCart(productId){
      axios.post('/goods/addCart',{
        productId: productId
      }).then(res => {
        if(res.data.status == 0){
          this.mdShowCart = true;
          this.$store.commit('updateCartCount',1);
        }else{
          this.mdShow = true;
        }
      })
    },
    closeModel(){
      this.mdShow = false;
      this.mdShowCart = false;
    }
  }
}
</script>


